import React from 'react'
import { Outlet } from 'react-router-dom'
import { useNavigate } from 'react-router-dom'

export default function Home() {
  //声明式路由导航
  //编程式路由导航
  const navgite = useNavigate()
  const toMusicHandle = () => {
    navgite('/main/home/music?name=张三&id=001')
  }
  const toNewsHandle = () => {
    navgite('/main/home/news')
  }

  return (
    <div>
      <h1>
        我是Home的内容
      </h1>
      <button onClick={toMusicHandle}>Music</button>
      <button onClick={toNewsHandle}>News</button>
      <Outlet />
    </div>
  )
}
